<template>
  <el-dialog
    v-if="load"
    title="选择商品"
    v-model="visible"
    align-center
    width="1000px"
    :z-index="2000"
    drag
  >
    <div class="flex flex-wrap gap-[8px] mb-4">
      <el-input
        v-model.trim="form.sku_cn_title"
        class="w-40"
        placeholder="SKU"
        clearable
      ></el-input>
      <el-input
        v-model.trim="form.sku"
        class="w-40"
        placeholder="系统SKU"
        clearable
      ></el-input>
      <el-input
        v-model.trim="form.custom_sku"
        class="w-40"
        placeholder="自定义SKU"
        clearable
      ></el-input>
      <el-button class="ml-auto m-0" type="primary" @click="handleSearch()"
        >查询</el-button
      >
      <el-button class="!ml-0" @click="handleReset()">重置</el-button>
    </div>
    <vxe-table ref="tableRef" :data="tableData" height="530">
      <vxe-column :type="type" width="60"></vxe-column>
      <vxe-column field="attr_img" title="产品" width="80">
        <template #default="{ row }">
          <VImage :src="row.attr_img" width="60" height="60" :preview="false"></VImage>
        </template>
      </vxe-column>
      <vxe-column field="sku" title="SKU" width="120">
        <template #default="{ row }">
          <div class="flex">
            {{ row.sku }}
            <div
              v-if="row.is_combination == 1"
              class="bg-[#E50113] text-white text-xs w-[20px] h-[20px] leading-[20px] rounded-full text-center ml-2"
            >
              组
            </div>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="custom_sku" title="自定义SKU" width="120"></vxe-column>
      <vxe-column field="sku_cn_title" title="产品名称" width="220">
        <template #default="{ row }">
          <VText :line="3" :value="row.sku_cn_title"></VText>
        </template>
      </vxe-column>

      <vxe-column field="specification" title="开发人/开发时间">
        <template #default="{ row }">
          <div>{{ row.developer_text }}</div>
          <div>{{ row.dev_add_time }}</div>
        </template>
      </vxe-column>
    </vxe-table>
    <div>
      <vxe-pager
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :total="page.total"
        :page-sizes="[10, 20, 100]"
        @page-change="pageChange"
        :layouts="[
          'PrevJump',
          'PrevPage',
          'Jump',
          'PageCount',
          'NextPage',
          'NextJump',
          'Sizes',
          'Total',
        ]"
      >
      </vxe-pager>
    </div>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="submit"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>

<script lang="jsx" setup>
import { getProductList } from "./api";
import { ElMessage } from "element-plus";
import VImage from "@/components/Image/index.vue";

const tableRef = ref();
const emit = defineEmits(["close", "uploadSku"]);

const props = defineProps({
  type: {
    type: String,
    default: "checkbox",
  },
});

const { type } = toRefs(props);

const data = reactive({
  load: false,
  visible: false,
  loadings: {},
  tableData: [],
  form: {},
  page: {
    pageNum: 1,
    pageSize: 20,
    total: 0,
  },
});

const { load, visible, loadings, tableData, form, page } = toRefs(data);

// 打开弹窗
const open = async () => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  loadings.value = {};
  visible.value = true;
  getList();
};
// 关闭弹窗
const close = () => {
  visible.value = false;
};

const getList = async () => {
  const formData = {
    ...page.value,
  };

  for (const key in form.value) {
    if (form.value.hasOwnProperty(key) && form.value[key].type) {
      formData[form.value[key].type] = form.value[key].value;
    }
  }

  const res = await getProductList({ ...formData, ...form.value });
  tableData.value = res.data;
  page.value.total = res.total;
};

const handleSearch = () => {
  getList();
};

const handleReset = () => {
  form.value = {
    skuRange: { type: "sku", value: [], range: false },
  };
  getList();
};

const pageChange = (val) => {
  page.value.pageNum = val.currentPage;
  page.value.pageSize = val.pageSize;
  getList();
};

//获取已选中的行
const getSelectRow = () => {
  const $table = tableRef.value;
  if ($table) {
    return type.value == "checkbox"
      ? $table.getCheckboxRecords()
      : $table.getRadioRecord();
  }
};

// 提交
const submit = () => {
  const selected = getSelectRow();
  emit("selected", selected);
  close();
};

defineExpose({ open });
</script>
<style lang="scss" scoped>
:deep(.vxe-cell--radio) {
  font-size: 20px !important;
}
</style>
